<template>
  <div class="z-home">
    <div class="z-gantt-container" ref="schedulerRef"></div>
  </div>
</template>

<script>
import gantt from '@/plugin/gantt/index'
import { addEvents } from '@/plugin/gantt/utils/index'
export default {
  name: 'home',
  data() {
    return {
      majorGannt: {},
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
      setTimeout(() => {
        this.setConfig()
      }, 1000)
    })
  },
  methods: {
    init() {
      this.majorGannt = new gantt(this.$refs.schedulerRef)
    },
    setConfig() {
      const resourcesData = [
        {
          id: '1',
          name: '陆军',
          expanded: true,
          children: [
            {
              id: '1-1',
              name: '陆军',
              expanded: true,
              children: [
                {
                  id: '1-1-1',
                  name: '合成第二旅',
                  expanded: true,
                  cls: 'gantt-parent-row',
                  children: [
                    {
                      id: '1-1-1-1',
                      name: '合成一营',
                    },
                  ],
                },
              ],
            },
          ],
        },
      ]
      const eventsData = [
        {
          id: 2,
          resourceId: '1-1-1-1',
          name: 'Press conference',
          startDate: '2018-03-01',
          endDate: '2018-03-07',
        },
        {
          id: 3,
          resourceId: '1-1-1-1',
          name: 'Audition',
          startDate: '2018-03-12',
          endDate: '2018-04-09',
        },
      ]
      const config = {
        startDate: new Date(2018, 2, 1),
        endDate: new Date(2018, 4, 28),
        eventsData,
        resourcesData,
      }
      this.majorGannt.resetGanttProject(config)
      // 添加事件
      addEvents(this.majorGannt.scheduler, eventsData)
      this.majorGannt.scheduler.on('eventClick', (event) => {
        // 在事件单击时执行操作，例如显示详细信息
        console.log('Clicked event:', event)
      })
    },
  },
}
</script>
<style lang="scss">
.z-home {
  width: calc(100% - 100px);
  margin: 0 auto;
  height: 800px;
  .z-gantt-container {
    width: 100%;
    height: 100%;
    position: relative;
    background: rgba(0, 81, 127, 0.5);
  }
}
</style>
